﻿@using DevExpress.Blazor

<div class="demo-description">
    <h2><DemoNavLink Link="SchedulerResources#GroupByResource" />Group by Resource</h2>
    <p>Our Blazor Scheduler component allows you to assign <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxScheduler#resources">resources</a> to individual appointments/events. Resources allow you to display schedules across multiple columns. For example, you can create a resource item for each employee and then group appointments by this resource.</p>
    <p>The DevExpress Blazor Scheduler component includes a drop-down <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxScheduler.ResourceNavigatorVisible">Resource Navigator</a> window. Use this window to hide or display resource groups as needed.</p>
    <p>This demo illustrates how to easily group scheduled appointments by resource. When appointments are grouped by resource and the Scheduler component displays multiple dates and resources, date headers are grouped under resource headers.</p>
    <p>To group appointments by resource, set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxScheduler.GroupType">GroupType</a> property to <b>Resource</b>.</p>
</div>

<div class="option-container">
    <DxCheckBox @bind-Checked="@ResourceColorInHeaderVisible">Resource Color In Header Visible</DxCheckBox>
</div>

<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage"
             GroupType="SchedulerGroupType.Resource"
             ResourceColorInHeaderVisible="@ResourceColorInHeaderVisible"
             CssClass="mw-1100">
    <DxSchedulerDayView DayCount="2" ShowWorkTimeOnly="true"></DxSchedulerDayView>
</DxScheduler>

<CodeSnippet_Scheduler_GroupByResource></CodeSnippet_Scheduler_GroupByResource>

@code {
    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentsSource = ResourceAppointmentCollection.GetAppointments(),
        AppointmentMappings = new DxSchedulerAppointmentMappings() {
            Type = "AppointmentType",
            Start = "StartDate",
            End = "EndDate",
            Subject = "Caption",
            AllDay = "AllDay",
            Location = "Location",
            Description = "Description",
            LabelId = "Label",
            StatusId = "Status",
            RecurrenceInfo = "Recurrence",
            ResourceId = "ResourceId"
        },
        ResourcesSource = ResourceAppointmentCollection.GetResourcesForGrouping(),
        ResourceMappings = new DxSchedulerResourceMappings() {
            Id = "Id",
            Caption = "Name",
            BackgroundCssClass = "BackgroundCss",
            TextCssClass = "TextCss"
        }
    };

    bool ResourceColorInHeaderVisible { get; set; } = true;
}
